<template>
  <div class="wrapper">
    <!--  顶部-->
    <div class="head">
      <div class="left">消息中心</div>
      <div class="right">
        <div class="left"> <el-icon><BrushFilled /></el-icon></div>
        <div class="right"> <el-icon><Setting /></el-icon> </div>
      </div>
    </div>
    <div class="pingtaixiaoxi">
      <div class="left">平台消息</div>
      <div class="right">查看全部 ></div>
    </div>
    <div class="zanwuxiaoxi">
      <i class="fa-solid fa-circle-exclamation "></i>&nbsp;&nbsp;暂无消息
    </div>
    <div class="liaotiandongtai">聊天动态</div>
    <div class="message">

      <div class="head">--------------两周前的消息--------------</div>
      <div class="body">
        <div class="one">
          <div class="left"><img src="@/assets/骑手.png" /></div>
          <div class="center">
            <div class="on">骑手刘欢</div>
            <div class="under">订单已送达，祝您用餐愉快</div>
          </div>
          <div class="right">2023年8月3日</div>

        </div>
        <div class="two">
          <div class="left"><img src="@/assets/骑手.png" /></div>
          <div class="center">
            <div class="on">骑手黄鹏</div>
            <div class="under">订单已送达，祝您用餐愉快</div>
          </div>
          <div class="right">2023年8月2日</div>

        </div>
      </div>


    </div>


    <!-- 底部菜单部分 -->
    <Footer />

  </div>

</template>

import Footer from '../components/Footer.vue';

<script setup lang="ts">

import Footer from "@/components/Footer.vue";
</script>


<style scoped>

body{
  background-color:  #f5f5f5
}
.wrapper{
  margin-top: 4vw;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
/*消息中心部分*/
.wrapper .head{
  flex: 0.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 14vw;

}
.wrapper .head .left{

  margin-left: 5vw;
  font-size: 5vw;
  font-weight: bold;
}
.wrapper .head .right{
  margin-left: 5vw;
  display:flex;
  justify-content: space-between;
  width: 30vw;
}
.wrapper .head .right .left{
  font-size: 6vw;
  margin-right: 1vw;
  margin-left: 8vw;
}
.wrapper .head .right .right{
  font-size: 6vw;
  margin-top: 1vw;
}
/*平台消息部分*/
.wrapper .pingtaixiaoxi{
  flex:0.2;
  margin-top: 3vw;
  display: flex;
  justify-content: space-between;
}
.wrapper .pingtaixiaoxi .left{
  margin-left: 5vw;
  font-size: 4vw;
  font-weight: bold;
}
.wrapper .pingtaixiaoxi .right{
  margin-top: 2vw;
  margin-right: 5vw;
  font-size: 3vw;
  color: #9F9F9F;
}

/*暂无消息部分*/
.wrapper .zanwuxiaoxi{
  margin-top: 3vw;
  flex:0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5vw;
  margin-right: 5vw;
  background-color: white;
  border-radius: 3vw;
  color: #9F9F9F;
}
/*聊天动态*/
.wrapper .liaotiandongtai{
  flex:0.6;
  margin-left: 5vw;
  font-size: 4vw;
  font-weight: bold;
  display: flex;
  align-items: center;


}
/*信息*/
.wrapper .message{
  flex:7.5;
  display: flex;
  flex-direction: column;
  margin-left: 5vw;
  margin-right: 5vw;
  border-radius: 5vw;
  background-color: white;
}


.wrapper .message .head{
  flex: 0.5;
  height: 1vw;
  display: flex;
  justify-content: center;
  color: #9F9F9F;

}

.wrapper .message .body{
  flex: 9;
  display: flex;
  flex-direction: column;

}

/*第一个骑手*/
.wrapper .message .body .one{
  margin-top: 3vw;
  display: flex;
  margin-bottom: 2vw;

}
.wrapper .message .body .one .left{
  margin-left: 2vw;

}
.wrapper .message .body .one .left img{
  height:15vw;
  width: 14vw;
}
.wrapper .message .body .one .center{
  margin-left: 2vw;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrapper .message .body .one .center .on{
  margin-top: 1vw;
  font-weight: bold;
  font-size: 4vw;
}

.wrapper .message .body .one .center .under{
  font-size: 3.5vw;
  color: #9F9F9F;
  margin-bottom: 1.5vw;
}

.wrapper .message .body .one .right{
  margin-left: 4vw;
  margin-top: 1vw;
  font-size: 3.5vw;
  color: #9F9F9F;
}

/*第二个骑手*/

.wrapper .message .body .two{
  margin-top: 3vw;
  display: flex;
  margin-bottom: 2vw;

}
.wrapper .message .body .two .left{
  margin-left: 2vw;

}
.wrapper .message .body .two .left img{
  height:15vw;
  width: 14vw;
}
.wrapper .message .body .two .center{
  margin-left: 2vw;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrapper .message .body .two .center .on{
  margin-top: 1vw;
  font-weight: bold;
  font-size: 4vw;
}

.wrapper .message .body .two .center .under{
  font-size: 3.5vw;
  color: #9F9F9F;
  margin-bottom: 1.5vw;
}

.wrapper .message .body .two .right{
  margin-left: 4vw;
  margin-top: 1vw;
  font-size: 3.5vw;
  color: #9F9F9F;
}




</style>